import Vuex from 'vuex'
import Vue from 'vue'

// 把Vuex当做插件先安装
Vue.use(Vuex)

//定义一个状态state
const state = {//存储项目中需要维护的一些状态数据
  userInfo:{
    name:"张三",
    sex:0,
    age:20,
    height:1.8
  }
}

//定义一个getters
const getters = {//提供一些store中的计算属性，用于组件获取state中的状态值 (对获取时的数据提供一个获取前的拦截处理过程)
  getUserSex(state){//获取用户的性别 
      return !state.userInfo.sex?'女':'男';
  },
  getUserAge(state){
    return state.userInfo.age;
  },
  getUserHeight(state){
    return state.userInfo.height;
  }
}

//定义一个mutaions 
const mutaions = {//(在Vuex中唯一提供修改state数据的方式，必须是同步函数)提供数据的修改操作（使用的指定方式进行修改，来保证数据的可靠）
  setUserAge(state , payload){//state , payload 修改的数据
    if(payload>=1 && payload <=120){
      state.userInfo.age = payload;
      console.log(state,payload);
    }else{
      throw new Error('你瞎啊，随便乱改年龄！');
    }
  },
  setUserSex(state , payload){
    // if([0,1].includes(payload)){
    //   state.userInfo.sex = payload;
    // }
    
    // 使用定时器模拟异步操作
    // setTimeout(()=>{
    //   if([0,1].includes(payload)){
    //     state.userInfo.sex = payload;
    //   } 
    // },3000)
  }
}

//定义一个action
const actions = {//用于进行异步处理vuex修改状态的方式 （Action只是在异步中提交mutations ，并不是直接修改state）
  setUserAge2(context , payload){
    setTimeout(()=>{//使用定时器模拟异步
      console.log('异步修改年龄。。。');
      context.commit('setUserAge',80);
    },3000)
  }
}

// 创建一个store 集中式仓库
const store = new Vuex.Store({
  state,
  getters,
  mutations,
  actions
})

export default store